<template>
    <a-form auto-label-width size="mini" layout="vertical">
        <a-form-item>
            <a-badge :count="properties?.length || 0">
                <a-button @click="onAdd">+</a-button>
            </a-badge>
        </a-form-item>
        <a-collapse v-if="properties?.length>0">
            <a-collapse-item  v-for="(p, index) in properties" :header="p?.name" :key="index">
                <template #extra>
                    <icon-delete @click="onDelete(index)"/>
                </template>
                <a-form-item>
                    name: <a-input v-model="p.name"></a-input>
                    value:<a-input v-model="p.value"></a-input>
                </a-form-item>
            </a-collapse-item>
        </a-collapse>
    </a-form>
</template>

<script>
import { isEmpty } from 'lodash'
import { toRaw, inject, reactive } from 'vue'

export default {
    name: 'ExtensionProperties',
    props: ["element"],
    setup () {
        const bpmnModeler = inject("bpmnModeler");
        return {
            bpmnModeler,
        };
    },
    data() {
        return {
            properties: []
        }
    },
    mounted() {
        console.log(this.element);
        const properties = toRaw(this.element?.businessObject?.extensionElements?.values?.filter(v => { return v.$type == 'flowable:Properties' }).map(v => {
            return v.values?.map(p => {
                return {
                    name: p.name,
                    value: p.value
                }
            }) || []
        })) || [];
        console.log(properties);
        this.properties = reactive(properties[0] || [])
    },
    watch: {
        properties: {
            deep: true,
            immediate: false,
            handler:
            function(newVal) {
                let extensionElements = this.element.businessObject.get('extensionElements')
                if (!extensionElements) {
                    extensionElements = this.bpmnModeler.get('moddle').create('bpmn:ExtensionElements')
                }

                console.log(newVal);

                extensionElements.values = extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:Properties') || []

                if (!isEmpty(newVal)) {

                    const ele = this.bpmnModeler.get('moddle').create('flowable:Properties')
                    newVal.forEach(element => {
                        const property = this.bpmnModeler.get('moddle').create('flowable:Property')
                        property['name'] = element.name;
                        property['value'] = element.value
                        ele.get("values").push(property);
                    });
                    extensionElements.get('values').push(ele);
                } else {
                    // delete this.element.businessObject.$attrs[`flowable:${type}`]
                    if (extensionElements.values?.length == 0) {
                        delete this.element.businessObject.$attrs[`bpmn:ExtensionElements`]
                        return;
                    }
                }

                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), { extensionElements });
            }
        },
    },
    methods: {
        onAdd() {
            this.properties?.push({
                name: '',
                value: ''
            })
        },
        onDelete(index) {
            this.properties.splice(index, 1)
        }
    }
}
</script>

<style lang="scss" scoped>

</style>